<template>
  <div class="flex-r flex-fill bc13 pos-r menus">
    <div
      class="toggle-width pos-r bcf round5 mart5 flex-c"
      :style="{ width: sideBarExpand ? '230px' : '56px' }"
    >
      <div style="height: 65px" class="bdbso flrc fs16 pad2">
        <mu-button
          @click="sideBarToggle"
          icon
          color="primary"
          slot="left"
          v-if="$isMicro"
        >
          <mu-icon
            value="format_indent_increase"
            v-show="!sideBarExpand"
          ></mu-icon>
          <mu-icon
            value="format_indent_decrease"
            v-show="sideBarExpand"
          ></mu-icon>
        </mu-button>
        <div class="pad5 fwb c1" v-show="sideBarExpand || !$isMicro">EZ</div>
        <div class="flex1 fwb" v-show="sideBarExpand">BOM</div>
      </div>
      <mu-list
        class="flex1"
        toggle-nested
        :toggle-nested-type="sideBarExpand ? 'expand' : 'popover'"
        :key="sideUpdateKey"
      >
        <EzMenu
          :menu="menu"
          @open="onChildOpen"
          :key="`menu_${index}`"
          :index="index"
          v-for="(menu, index) in menus"
          :sideBarExpand="sideBarExpand"
        ></EzMenu>
      </mu-list>
    </div>
    <div class="flex1" style="width: 0">
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import EzMenu from "@/comps/menu/EzMenu.vue";
export default {
  name: "v1-layout",
  components: { EzMenu },
  data() {
    return {
      sideBarExpand: true,
      isFocusSearch: false,
      model: {},
      menus: [],
      user: {},
      sideUpdateKey: "",
    };
  },
  mounted() {
    if (process.env["VUE_APP_MENU_SRC"] === "api") {
      this.getMenuFromApi();
    } else {
      this.getMenu();
    }
    this.user = this.$ezstore.auth.getUser();
  },
  methods: {
    onChildOpen(v, index) {
      for (let child in this.menus) {
        if (child * 1 === index) {
          this.$set(this.menus[child], "_open", v);
        } else {
          this.$set(this.menus[child], "_open", false);
        }
      }
    },
    sideBarToggle() {
      this.sideBarExpand = !this.sideBarExpand;
      this.open = "";
      this.test = this.$ezstore.auth.getIsLogin();
    },
    focusSearch() {
      this.isFocusSearch = !this.isFocusSearch;
    },
    //从网络获取菜单
    getMenuFromApi() {
      this.$http.post_core("/core/admin/Menu/my", {}, (res) => {
        let menus = res.data;
        if (this.$env.VUE_APP_EZ_APP_ID === "") {
          //单体运行
          this.menus = menus;
        } else {
          //服务运行
          let newMenus = [];
          for (let menu of menus) {
            if (menu.model.appId === this.$env.VUE_APP_EZ_APP_ID) {
              newMenus.push(menu);
            }
          }
          this.initMenu(newMenus);
          this.menus = newMenus;
        }
      });
    },
    //从本地获取菜单
    getMenu() {
      let menus = this.$ezstore.auth.getMenus();
      if (this.$env.VUE_APP_EZ_APP_ID === "") {
        //单体运行
        this.menus = menus;
      } else {
        //服务运行
        let newMenus = [];
        for (let menu of menus) {
          if (menu.model.appId === this.$env.VUE_APP_EZ_APP_ID) {
            newMenus.push(menu);
          }
        }
        this.initMenu(newMenus);
        this.menus = newMenus;
      }
    },
    initMenu(menus) {
      let find = false;
      for (let item of menus) {
        item._open = false;
        if (item.url === this.$route.path) {
          item._open = true;
          find = true;
        }
        if (item.children.length > 0) {
          item._open = this.initMenu(item.children);
          if (item._open) {
            find = true;
          }
        }
      }
      return find;
    },
  },
  watch: {
    sideBarExpand() {
      this.sideUpdateKey = Math.random();
    },
  },
};
</script>

<style scoped>
.menu-close {
  transform: rotate(-90deg);
  transition: transform 0.2s;
}

.menu-open {
  transform: rotate(0deg);
  transition: transform 0.2s;
}

.toggle-width {
  transition: width 0.2s;
}

.longger {
  width: 300px;
}
</style>
